const mainCanvas = document.querySelector('#main-canvas');

const style = window.getComputedStyle(mainCanvas, null);
const borderLeft = parseFloat(style["border-left-width"]);
const borderTop = parseFloat(style["border-top-width"]);
const paddingLeft = parseFloat(style["padding-left"]);
const paddingTop = parseFloat(style["padding-top"]);

let _onMouseMove;

// 监听鼠标移动
window.addEventListener('mousemove', (e) => {
  let clientX = e.clientX;
  let clientY = e.clientY;
  let rect = mainCanvas.getBoundingClientRect();
  let x = clientX - rect.left - borderLeft - paddingLeft;
  let y = clientY - rect.top - borderTop - paddingTop;
  _onMouseMove && _onMouseMove(x, y, clientX, clientY);
});

export const setOnMouseMove = (onMouseMove) => {
  _onMouseMove = onMouseMove;
};
